<template>
  <div class="container">
    <div class="inner-container">
      <el-card class="inner-box">
        <div class="box-title">第一步：上传文件，点击开始分割按钮</div>
        <div class="box-content">
          <el-upload
              class="file-upload"
              drag
              ref="upload"
              action="http://yiyuy.mynatapp.cc/model/uploadImage"
              :limit="1"
              accept=".jpg,.png,.jpeg"
              :on-exceed="handleExceed"
              :on-error="handleError"
              :on-success="handleSuccess"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </div>
      </el-card>
      <div class="operate-buttons">
        <div class="inner-operate-buttons">
          <el-button type="danger" @click="resetFile">重置文件</el-button>
          <el-button type="primary" @click="startSegmentation">开始分割</el-button>
        </div>
      </div>
      <el-card class="inner-box">
        <div class="box-title">第二步：转换结果
          <div class="download-result">
            <el-link type="info" :underline="false" disabled>需要下载分割后的图片?</el-link>
            <el-link type="primary" @click="downloadResult">点击这里</el-link>
          </div>
        </div>
        <div class="box-content">
          <div class="raw-image-and-result">
            <div class="image-box">
              <img :src="rawImageBase64" style="width: 100%;height: 100%" alt=""/>
            </div>
            <div class="middle-blank">
              <div class="divider"></div>
            </div>
            <div class="image-box">
              <img :src="resultImageBase64" style="width: 100%;height: 100%" alt=""/>
            </div>
          </div>
          <el-tag type="primary" class="area-information">石细胞占比：{{ areaRatio + '%' }}</el-tag>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import {segmentation} from "@/api/segmentation";

export default {
  name: "SingleSegmentation",
  data() {
    return {
      areaRatio: 11.102,
      // 原图片base64格式
      rawImageBase64: 'https://fundusdetection.oss-cn-beijing.aliyuncs.com/0000.png',
      // 分割后的图片的base64格式
      resultImageBase64: 'https://fundusdetection.oss-cn-beijing.aliyuncs.com/pred_0000.png',
      form: {
        filename: '',
      }
    }
  },
  methods: {
    handleExceed() {
      this.$message.warning('只能上传一个文件')
    },
    handleError() {
      this.$message.error('文件上传失败')
    },
    handleSuccess(response, file, fileList) {
      this.form.filename = response.data.filename;
      this.rawImageBase64 = 'data:image/png;base64,' + response.data.base64;
      this.$message.success('文件上传成功')
    },
    resetFile() {
      this.$refs.upload.clearFiles()
      this.$message.success('上传文件重置成功!');
      this.areaRatio = 11.102
      this.rawImageBase64 = 'https://fundusdetection.oss-cn-beijing.aliyuncs.com/0000.png'
      this.resultImageBase64 = 'https://fundusdetection.oss-cn-beijing.aliyuncs.com/pred_0000.png'
      this.filename = ''
    },
    startSegmentation() {
      if (this.form.filename === '' || this.form.filename.length <= 0) {
        this.$message.warning('请先上传图片')
        return;
      }

      let loading = this.$loading({
        lock: true,
        text: '图像分割中，请稍后...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })

      segmentation(this.form).then(res => {
        console.log(res)
        loading.close();
        this.resultImageBase64 = 'data:image/png;base64,' + res.data.base64;
        this.areaRatio = res.data.areaRatio;
        this.$message.success('图像分割成功')
      })
    },
    downloadResult() {
      if (this.form.filename === '' || this.form.filename.length <= 0) {
        this.$message.warning('请先上传图片')
        return;
      }
      this.downloadBase64Image(this.resultImageBase64, this.form.filename + '-result.png')
      this.$message.success('下载分割图片成功')
    },
    downloadBase64Image(base64, filename) {
      // 去掉Base64前缀
      const base64Data = base64.replace(/^data:image\/(png|jpeg|jpg);base64,/, "");
      const byteCharacters = atob(base64Data);
      const byteNumbers = new Array(byteCharacters.length);

      for (let i = 0; i < byteCharacters.length; i++) {
        byteNumbers[i] = byteCharacters.charCodeAt(i);
      }

      const byteArray = new Uint8Array(byteNumbers);
      const blob = new Blob([byteArray], {type: "image/png"});

      // 创建下载链接
      const aLink = document.createElement("a");
      aLink.download = filename;
      aLink.href = URL.createObjectURL(blob);
      aLink.click();
    }
  }
}
</script>

<style lang="less" scoped>
@keyframes MoveIn {
  0% {
    opacity: 0;
    transform: translateY(12px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.container {
  width: 100%;
  height: 100%;

  .inner-container {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    animation: MoveIn .5s cubic-bezier(.4, 0, .2, 1);

    .inner-box {
      margin-top: 20px;

      /deep/ .el-card__body {
        padding: 0;
      }

      .box-title {
        padding: 10px 15px;
        font-size: 16px;
        font-weight: 700;
        border-bottom: 1px solid #ddd;
        background-color: #f5f5f5;
        display: flex;

        .download-result {
          margin-left: auto;
          display: flex;
          align-items: center;
          font-size: 14px;
        }
      }

      .box-content {
        padding: 10px 15px;

        .file-upload {
          width: 100%;

          /deep/ .el-upload {
            width: 100%;
          }

          /deep/ .el-upload-dragger {
            width: 100%;
          }
        }

        .raw-image-and-result {
          display: flex;

          .image-box {
            width: 50%;
            height: 350px;
            border: 1px solid #ddd;
          }

          .middle-blank {
            width: 5%;
            display: flex;
            align-items: center;
            justify-content: center;

            .divider {
              height: 100%;
              width: 1px;
              background-color: #ddd;
            }
          }
        }

        .area-information {
          font-weight: 700;
          margin-top: 10px;
        }
      }
    }

    .operate-buttons {
      width: 100%;
      margin-top: 10px;
      display: flex;

      .inner-operate-buttons {
        display: flex;
        margin: 0 auto;
      }
    }
  }
}
</style>
